<template>
  <van-button
    :icon="value ? 'star' : 'star-o'"
    :class="{
      collected: value
    }"
    :loading="isLoading"
    @click="onCollect"
  />
</template>

<script>
import { addCollect, deleteCollect } from '@/api/article'
export default {
  name: 'CollectArticle',
  data () {
    return {
      isLoading: false // 收藏按钮的 loading 状态
    }
  },

  props: {
    //   当前文章的收藏状态 通过v-model绑定的组件
    value: {
      type: Boolean,
      required: true
    },

    // 当前文章的文章Id
    articleId: {
      type: [String, Number, Object],
      required: true
    }
  },

  methods: {
    // 点击收藏和取消收藏
    async onCollect () {
      // 大概思路:
      // 判断当前文章的收藏状态
      // 已收藏，点击取消收藏   向服务器发起delete请求，请求参数是当前文章的ID
      // 未收藏，点击添加收藏   发起post请求，请求参数是文章的id，具体看文档
      // 更新视图，子传父传值，修改文章的收藏状态，
      // （注意，组件通过v-model双向绑定的，所以父组件不需要自定义事件）
      this.isLoading = true
      try {
        if (this.value) {
          // 已收藏,取消收藏
          await deleteCollect(this.articleId)
        } else {
          // 未收藏,添加收藏
          await addCollect(this.articleId)
        }

        // 更新视图
        this.$emit('input', !this.value)

        // 根据文章的收藏状态判定是 收藏成功 取消收藏了
        this.$nextTick(() => {
          this.$toast.success(this.value ? '收藏成功' : '取消收藏')
        })
      } catch (error) {
        this.$toast('操作失败,请重试')
      }

      this.isLoading = false
    }
  }
}
</script>

<style scoped lang="less">
.collected {
  color: #ffa500 !important;
}
</style>
